<template>
  <div class="container">
    <div class="hotSongs">热门歌单推荐</div>
    <div class="songs" v-for="song in songs" :key="song.id">
      <div class="song">
        <div class="imgs">
          <img
            :src="song.coverImgUrl"
            :alt="song.name"
            :title="song.name"
            class="img"
          />
        </div>

        <div class="words">
          <div class="name">{{ song.name }}</div>
          <div class="num">订阅量：{{ song.subscribedCount }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { resHotSongs } from "@/api";
export default {
  name: "songs",
  data() {
    return {
      songs: {},
    };
  },
  mounted() {
    this.getSongs();
  },
  methods: {
    async getSongs() {
      await resHotSongs(5)
        .then((res) => {
          this.songs = res.data.playlists;
        })
        .catch((error) => {
          this.$message({
            message: "很遗憾你，这是一条失败的消息",
            type: "error",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  background: rgb(240, 231, 231);
  .hotSongs {
    text-align: center;
    font-size: 2em;
    font-family: cursive;
    padding: 1em 0em 0.5em 0em;
  }
  .songs {
    display: inline-block;
    justify-content: center;
    .song {
      margin: 1.5em;
      &:hover {
        box-shadow: 10px 10px 20px #dedede, -10px -10px 20px #ffffff;
        transform: scale(1.1);
      }
      .imgs {
        white-space: nowrap;
        display: flex;
        justify-content: center;
      }
      .img {
        width: 15.5em;
        height: 17em;
      }
      .words {
        margin-top: 0.5em;
      }
      .name {
        font-size: 0.66em;
      }
      .num {
        font-size: 0.5em;
        color: rgb(129, 130, 132);
      }
    }
    .song:hover + .name {
      color: rgb(206, 5, 5);
    }
  }
}
</style>